import React, {Component} from 'react'
import { withRouter } from 'react-router-dom'
import { Input, Button } from 'element-react'
import Select from '../base/Select'
import Pagination from '../base/Pagination'
import Breadcrumb from '../base/Breadcrumb'

class shipmentOrder extends Component {
  constructor (props, context) {
    super (props, context)
    this.state = {
      // 总条数
      total: 100,
      pageNo: 0,
      //--------
      nowChooseSort: '',
      startTime: '',
      endTime: '',
      orderNum: '',
      userNUm: '',
      orderTypeList: [
        {
          label: '待发货',
          value: 4,
        },
        {
          label: '待发货(缺货)',
          value: 6,
        },
        {
          label: '售后中',
          value: 9,
        }
      ],
      orderListData: []
    }
  }
  changePage (currentPage) {
    this.setState({
      pageNo: currentPage - 1
    }, () => {
      this.getOrderList()
    })
  }
  search () {
    this.setState({
      pageNo: 0
    }, () => {
      this.getOrderList()
    })
  }
  switchOrderStatus (val) {
    this.setState({nowChooseSort: val})
  }
  // 查看
  look (obj) {
    let orderInfo = JSON.stringify({orderId: obj.orderId, userId: obj.userId, userName: obj.userName})
    localStorage.setItem('orderInfo', orderInfo)
    this.props.history.push({
      pathname: `/orderDetail/shipmentOrder`
    })
  }
  getOrderList () {
    let data = {
      orderId: this.state.orderNum,
      pageNo: this.state.pageNo,
      size: 10,
      status: this.state.nowChooseSort,
      userId: this.state.userNUm
    }
    this.$ajax.queryDeliverList(data).then(res => {
      if (res.code === 200) {
        // for (let item of res.data.content) {
          /*switch (item.status) {
            case 1:
              item.status = '创建订单，等待付款'
              break
            case 2:
              item.status = '取消订单（已付款）'
              break
            case 3:
              item.status = '取消订单（未付款）'
              break
            case 4:
              item.status = '待发货'
              break
            case 5 :
              item.status = '待收货'
              break
            case 6:
              item.status = '待收货(缺货)'
              break
            case 7:
              item.status = '完成'
              break
            case 8:
              item.status = '已关闭（未付款）'
              break
            case 9:
              item.status = '售后中'
              break
          }
        }*/
        this.setState({
          total: res.data.totalElements,
          orderListData: res.data.content
        })
      }
    })
  }
  // 点击按钮
  operation (obj, val) {
    let changeStatus
    if (val === 'send') {
      changeStatus = 5
    } else if (val === 'lack') {
      changeStatus = 6
    } else {
      changeStatus = 4
    }
    this.$ajax.modifyOrderStatus({
      id: obj.orderId,
      status: changeStatus
    }).then(res => {
      if (res.code === 200) {
        this.getOrderList()
      }
    })
  }
  componentDidMount () {
    this.getOrderList()
  }
  render () {
    return (
        <div className="order-module">
          <Breadcrumb data={['订单', '发货订单列表']}/>
          <div className="search-item">
            <div className="condition-item">
              <label htmlFor="orderNum">订单ID</label>
              <Input id="orderNum" placeholder="请输入订单编号" size="small" className="inputSmall" onChange={value => {this.setState({orderNum: value})}}/>
            </div>
            <div className="condition-item">
              <label htmlFor="userNum">用户ID</label>
              <Input id="userNum" placeholder="请输入用户编号" size="small" className="inputSmall" onChange={value => {this.setState({userNUm: value})}}/>
            </div>
            <div className="condition-item">
              <label>订单状态</label>
              <Select options={this.state.orderTypeList} select={this.switchOrderStatus.bind(this)}/>
            </div>
            <div>
              <button type="button" className="btn btn-search" onClick={this.search.bind(this)}>搜索</button>
            </div>
          </div>
          <div>
            <table className="table">
              <tbody>
              <tr>
                <th width={250}>订单ID</th>
                <th width={250}>用户ID</th>
                <th width={250}>订单状态</th>
                <th>操作</th>
              </tr>
              {
                this.state.orderListData.length > 0 ? this.state.orderListData.map((a, index) => {
                  return (
                      <tr key={index}>
                        <td>{a.orderId}</td>
                        <td>{a.userId}</td>
                        <td>
                          {a.status === 1 ? '创建订单，等待付款' : ''}
                          {a.status === 2 ? '取消订单（已付款）' : ''}
                          {a.status === 3 ? '取消订单（未付款）' : ''}
                          {a.status === 4 ? '待发货' : ''}
                          {a.status === 5 ? '待收货' : ''}
                          {a.status === 6 ? '待发货(缺货)' : ''}
                          {a.status === 7 ? '完成' : ''}
                          {a.status === 8 ? '已关闭（未付款）' : ''}
                        </td>
                        <td>
                          {a.status === 4 ? <Button type="info" size="small" onClick={this.operation.bind(this, a, 'send')}>发货</Button> : <Button type="info" size="small" disabled>发货</Button>}
                          {a.status === 4 ? <Button type="info" size="small" onClick={this.operation.bind(this, a, 'lack')}>缺货</Button> :                           <Button type="info" disabled size="small">缺货</Button>}
                          {a.status === 6 ? <Button type="info" size="small" onClick={this.operation.bind(this, a, 'exist')}>有货</Button> :                           <Button type="info" disabled size="small">有货</Button>}
                          <Button type="info" size="small" onClick={this.look.bind(this, a)}>查看</Button>
                        </td>
                      </tr>
                  )
                }) : <tr><td colSpan={4}>暂无数据</td></tr>
              }
              </tbody>
            </table>
           </div>
          <Pagination total={this.state.total} changePage={this.changePage.bind(this)}/>
        </div>
    )
  }
}

export default withRouter(shipmentOrder)
